<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Document</title>
    <style>
    .title_area {
        text-align: center;
        font-size: 1.1em;
    }
    
    .title_area:nth-of-type(2) {
        margin-top: 3em;
    }
    
    .range_area {
        text-align: center;
    }
    
    [type="range"] {
        width: 500px;
    }
    
    .stage_area {
        width: 900px;
        height: 100px;
        margin-left: auto;
        margin-right: auto;
        padding: 100px 50px;
        background-color: #f0f0f0;
        box-shadow: inset 0 0 3px rgba(0, 0, 0, .35);
        -webkit-transition: top .5s;
        position: relative;
        z-index: 2;
        top: 0;
    }
    
    .perspective {
        color: #cd0000;
    }
    
    .piece {
        width: 100px;
        height: 100px;
        background-color: #cad5eb;
        padding: 10px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        position: relative;
    }
    
    .chrome_fix {
        position: absolute;
        left: 1em;
        top: 1em;
    }
    </style>
</head>

<body>
    <h1>好吧，CSS3 3D transform变换，不过如此！</h1>
    <p><a href="https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/">来源</a></p>
    <div class="demo">
        <h4 class="title_area">舞台宽度1000像素，整个舞台为视角对象，目前视角大小为perspective: <span id="perspFirst" class="perspective">500</span>px;
        </h4>
        <p class="range_area">100
            <input type="range" id="rangeFirst" min="100" max="1000" step="100" value="500" autocomplete="off"> 1000</p>
        <div id="stageFirst" class="stage_area" style="perspective: 500px; z-index: 3; top: 0px;">
            <div class="piece" style="background-color: rgba(148, 204, 51, 0.75); z-index: 24; transform: rotateY(45deg);"></div>
            <div class="piece" style="background-color: rgba(59, 204, 51, 0.75); z-index: 31; transform: rotateY(45deg);"></div>
            <div class="piece" style="background-color: rgba(204, 51, 138, 0.75); z-index: 45; transform: rotateY(45deg);"></div>
            <div class="piece" style="background-color: rgba(51, 138, 204, 0.75); z-index: 83; transform: rotateY(45deg);"></div>
            <div class="piece" style="background-color: rgba(204, 171, 51, 0.75); z-index: 500; transform: rotateY(45deg);"></div>
            <div class="piece" style="background-color: rgba(204, 115, 51, 0.75); z-index: 125; transform: rotateY(45deg);"></div>
            <div class="piece" style="background-color: rgba(51, 66, 204, 0.75); z-index: 56; transform: rotateY(45deg);"></div>
            <div class="piece" style="background-color: rgba(204, 51, 156, 0.75); z-index: 36; transform: rotateY(45deg);"></div>
            <div class="piece" style="background-color: rgba(51, 204, 125, 0.75); z-index: 26; transform: rotateY(45deg);"></div>
            <input type="button" value="舞台位置窗体区域垂直居中" class="chrome_fix">
        </div>
        <h4 class="title_area">舞台宽度1000像素，舞台中的每个方块作为视角对象，目前视角大小为：transform: perspective( <span id="perspSecond" class="perspective">500</span>px );
        </h4>
        <p class="range_area">100
            <input type="range" id="rangeSecond" min="100" max="1000" step="100" value="500" autocomplete="off"> 1000</p>
        <div id="stageSecond" class="stage_area" style="top: 0px; z-index: 2;">
            <div class="piece" style="background-color: rgba(204, 79, 51, 0.75); z-index: 24; transform: perspective(500px) rotateY(45deg);"></div>
            <div class="piece" style="background-color: rgba(204, 51, 61, 0.75); z-index: 31; transform: perspective(500px) rotateY(45deg);"></div>
            <div class="piece" style="background-color: rgba(204, 51, 125, 0.75); z-index: 45; transform: perspective(500px) rotateY(45deg);"></div>
            <div class="piece" style="background-color: rgba(51, 204, 117, 0.75); z-index: 83; transform: perspective(500px) rotateY(45deg);"></div>
            <div class="piece" style="background-color: rgba(128, 51, 204, 0.75); z-index: 500; transform: perspective(500px) rotateY(45deg);"></div>
            <div class="piece" style="background-color: rgba(204, 199, 51, 0.75); z-index: 125; transform: perspective(500px) rotateY(45deg);"></div>
            <div class="piece" style="background-color: rgba(51, 87, 204, 0.75); z-index: 56; transform: perspective(500px) rotateY(45deg);"></div>
            <div class="piece" style="background-color: rgba(112, 204, 51, 0.75); z-index: 36; transform: perspective(500px) rotateY(45deg);"></div>
            <div class="piece" style="background-color: rgba(158, 51, 204, 0.75); z-index: 26; transform: perspective(500px) rotateY(45deg);"></div>
            <input type="button" value="舞台位置窗体区域垂直居中" class="chrome_fix">
        </div>
    </div>
    <script>
      
      (function() {
        if (typeof window.screenX === "number") {
          // 随机颜色HSL
          var randomHsl = function() {
            return "hsla(" + Math.round(360 * Math.random()) + "," + "60%, 50%, .75)";
          }
          // CSS transform变换应用
          , transform = function(element, value, key) {
            key = key || "Transform";
            ["Moz", "O", "Ms", "Webkit", ""].forEach(function(prefix) {
              element.style[prefix + key] = value;  
            }); 
            
            return element;
          }
          // 浏览器选择器API
          , $ = function(selector) {
            return document.querySelector(selector);
          }, $$ = function(selector) {
            return document.querySelectorAll(selector);
          };
          // 元素遍历的方法
          Object.prototype.each = function(fn) {
            var length = this.length;
            for (var index=0; index<length; index++) {
              fn.call(this[index], this[index], index);
            }
            return this;
          };

          // 元素
          var eleStageFirst = $("#stageFirst"), eleRangeFirst = $("#rangeFirst")
            , elePieceFirst = $$("#stageFirst > div");
          
          elePieceFirst.each(function(element, indexFirst) {
            this.style.backgroundColor = randomHsl();
            this.style.zIndex = Math.round(100 / Math.abs(4.2 - indexFirst));
            transform(this, "rotateY(45deg)");
          });
          
          eleRangeFirst.addEventListener("change", function() {
            transform(eleStageFirst, this.value + "px", "Perspective");
            $("#perspFirst").innerHTML = this.value;
          }); 
          transform(eleStageFirst, eleRangeFirst.value + "px", "Perspective");
          
          // 第二部分
          var eleStageSecond = $("#stageSecond"), eleRangeSecond = $("#rangeSecond")
            , elePieceSecond = $$("#stageSecond > div");
          
          elePieceSecond.each(function(element, indexSecond) {
            element.style.backgroundColor = randomHsl();
            element.style.zIndex = Math.round(100 / Math.abs(4.2 - indexSecond));
            transform(element, "perspective("+ eleRangeSecond.value +"px) rotateY(45deg)");
          });
          
          eleRangeSecond.addEventListener("change", function() {
            var value = this.value;
            elePieceSecond.each(function(element, indexSecond) {
              transform(element, "perspective("+ eleRangeSecond.value +"px) rotateY(45deg)");
            });
            
            $("#perspSecond").innerHTML = value;
          }); 
        }  
          
          // 垂直位置居中 - Chrome浏览器
        //   var funStageValign = function(element) {
        //     var scrollTop = document.documentElement.scrollTop, clientHeight = document.documentElement.clientHeight;
        //       offsetTop = element.getBoundingClientRect().top;
            
        //     if (parseInt(window.getComputedStyle(element).top) === 0) {
        //       element.style.top = scrollTop + (window.innerHeight - 300) / 2 - offsetTop;
        //     } else {
        //       element.style.top = "0px";
        //     }
        //   };
          
        //   if (/chrome/i.test(navigator.userAgent)) {
        //     // 创建Chrome浏览器视区修正按钮
        //     var eleButtonFirst = document.createElement("input"), eleButtonSecond = document.createElement("input");
        //     var arrValue = ["舞台位置窗体区域垂直居中", "垂直位置还原"];
            
        //     [eleButtonFirst, eleButtonSecond].forEach(function(button) {
        //       button.type = "button";
        //       button.value = arrValue[0]; 
        //       button.className = "chrome_fix";
        //       button.addEventListener("click", function() {
        //         this.value = arrValue[Number(this.value !== arrValue[1])];
        //         var stage = this.parentNode;
        //         funStageValign(stage);

        //         if (stage === eleStageFirst) {
        //           eleStageSecond.style.zIndex = 2;
        //         } else {
        //           eleStageFirst.style.zIndex = 2;
        //         }
        //         stage.style.zIndex = 3;
        //       });
        //     });
            
        //     eleStageFirst.appendChild(eleButtonFirst);
        //     eleStageSecond.appendChild(eleButtonSecond);
        //   } 
        // } else {
        //   alert("你好，养猪场不是飞机场，是开不了战斗机的！"); 
        // }
      })();
    </script>
</body>

</html>
